<template>
	<view style="border-top: 1px solid #e4e4e4">
		<view class="container">
			<!-- 搜索 -->
			<view class="search">
				<u--input :value="value" clearable="true" placeholder="寻找更多优质商品" border="surround" @click="focusInput"
					v-model="value" @change="change" prefixIcon="search"
					prefixIconStyle="font-size: 33px;color: #909399"></u--input>
			</view>
			<view style=" margin:36rpx 0 10rpx 12rpx; font-size: 28rpx; ">猜你喜欢</view>
			<!-- 卡片轮播 -->
			<view class="kplb">
				<u-swiper height="185rpx" imgMode="aspectFit" :list="list3" previousMargin="0" nextMargin="150"
					easingFunction="linear" :autoplay="false" radius="5" bgColor="#f5f5f5"></u-swiper>
			</view>
			<!-- 刷新+热门搜索 -->
			<view style="display: flex;">
				<view style=" margin:36rpx 0 10rpx 12rpx; font-size: 28rpx; ">热门搜索</view>
				<view
					style="display: flex; align-items: center; justify-content: space-between; width: 32rpx; height: 32rpx;  margin:36rpx 0 0 468rpx;">
					<u-icon color="#337cff" name="reload"></u-icon>
					<text
						style="color: #337cff; font-size: 24rpx; display: inline-block; white-space: nowrap;">换一换</text>
				</view>
			</view>

			<!-- 圆形标签 -->
			<view style="margin-top: 8rpx;">
				<view style="display: flex;margin:0 0 16rpx 6rpx;">
					<view style="margin-right: 16rpx;">
						<u-tag @click="searchoff" text="圣诞礼物" plain color="#666666" border-color="#f2f2f2" bgColor="#e4e4e4"
							shape="square"></u-tag>
					</view>
					<view style="margin-right: 16rpx;">
						<u-tag @click="searchon" text="猫咪手办" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag>
					</view>
					<view style="margin-right: 16rpx;">
						<u-tag @click="searchoff" text="冰雪奇缘水晶球" plain color="#666666" border-color="#f2f2f2" bgColor="#e4e4e4"
							shape="square"></u-tag>
					</view>
					<view style="margin-right: 16rpx;">
						<u-tag @click="searchoff" text="书包" plain color="#666666" border-color="#f2f2f2" bgColor="#e4e4e4"
							shape="square"></u-tag>
					</view>
				</view>
				<view style="display: flex;margin-left: 6rpx;">
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="联想y7000p" plain color="#666666"
							border-color="#f2f2f2" bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="加绒牛仔裤" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="乐高机械组" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
				</view>
			</view>
			<!-- 删除 + 热门搜索 -->
			<view style="display: flex;">
				<view style=" margin:36rpx 0 10rpx 12rpx; font-size: 26rpx; ">热门搜索</view>
				<view
					style="display: flex; align-items: center; justify-content: space-between; width: 32rpx; height: 32rpx;  margin:36rpx 0 0 540rpx;">
					<u-icon size="36rpx" name="trash"></u-icon>
				</view>
			</view>
			<!-- 历史标签 -->
			<view style="margin-top: 8rpx;">
				<view style="display: flex;margin:0 0 16rpx 6rpx;">
					<view style="margin-right: 16rpx;"><u-tag @click="searchon" text="猫咪手办" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="模型" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="洗衣液" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="手办" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
					<view style="margin-right: 16rpx;"><u-tag @click="searchoff" text="李宁悟道" plain color="#666666" border-color="#f2f2f2"
							bgColor="#e4e4e4" shape="square"></u-tag></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "猫咪手办",
				list3: [
					this.$minioServerUrl + '/static/fenxiao/u275.png',
					this.$minioServerUrl + '/static/fenxiao/u279.png',
					this.$minioServerUrl + '/static/fenxiao/u287.png',
				],

			};
		},
		methods: {
			focusInput() {
				this.$refs.input.focus();
			},
			searchon() {
				uni.navigateTo({
					url: '/pages/search/search-on'
				})
			},
			searchoff() {
				uni.navigateTo({
					url: '/pages/search/search-off'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 25rpx;

		.search {
			margin: 0 auto;
			width: 680rpx;
		}
	}
</style>